<template>
<!--  电脑端element组件-->
  <view v-if="!isMobile">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="Home" name="/"></el-tab-pane>
      <el-tab-pane label="档案" name="profile"></el-tab-pane>
      <el-tab-pane label="待办事件" name="todo-list"></el-tab-pane>
      <el-tab-pane label="自动化测试" name="Test_Results"></el-tab-pane>
      <el-tab-pane label="课程成绩" name="course_status"></el-tab-pane>
      <el-tab-pane label="个人成绩" name="person_status"></el-tab-pane>
      <el-tab-pane disabled class="tabs-right">
        <template #label>
          <view v-if="isAuthenticated">
            <el-button type="warning" size='small' @click.stop="logout">登出</el-button>
          </view>
          <view v-else>
            <el-button type="warning" size='small' @click.stop="login">登录</el-button>
          </view>
          <el-button type="primary" size='small' style="margin-left: 10px"><a href="https://gitee.com/cpb2013/todo-list" target="_blank" style="text-decoration: none">Gitee仓库</a></el-button>
        </template>
      </el-tab-pane>
    </el-tabs>
    <van-notice-bar scrollable text="测试移动端时，请切换UA，展示不同效果；菜单向右滑动有更多" />
  </view>
<!--手机端vant组件-->
  <view v-else>
    <van-tabs v-model:active="activeName" @click-tab="Vant_onClickTab" animated>
      <van-tab title="Home" name="/"></van-tab>
      <van-tab title="档案" name="profile"></van-tab>
      <van-tab title="待办事件" name="todo-list-mb"></van-tab>
      <van-tab title="自动化测试" name="Test_Results"></van-tab>
      <van-tab title="课程成绩" name="course_status"></van-tab>
      <van-tab title="个人成绩" name="person_status"></van-tab>
    </van-tabs>
  </view>
  <van-notice-bar scrollable text="测试移动端时，请切换UA，展示不同效果；菜单向右滑动有更多" />
    <router-view></router-view>
</template>

<script lang="ts">
import { useAuthStore } from './store/auth';
import {ref} from 'vue';
import type {TabsPaneContext} from "element-plus";
import {isMobile} from "@/components/isMobile";

// import type { TabsPaneContext } from 'element-plus'

// const activeName = ref('first')

// const
export default {
  data() {
    return {
      activeName: ref('Home')
    };
  },
  computed: {
    isMobile() {
      return isMobile();
    },
    isAuthenticated() {
      return useAuthStore().isAuthenticated;
    },
    get_username()
    {
      return useAuthStore().user;
    },
  },
  methods: {
    login() {
      this.$router.push('login');
    },
    logout() {
      useAuthStore().logout();
      this.$router.go(-1);
    },
    handleClick(tab: TabsPaneContext, event: Event){
      this.$router.push(String(tab.props['name']))
      console.log(event)
    },
    Vant_onClickTab(event:Event)
    {
      if(event.title==='Home')
      {
        this.$router.push("/")
      }
      else
      {
        this.$router.push(String(event.name))
      }
      // console.log(event)
    }
  },
}


</script>

<style scoped>
:deep(.el-tabs__nav){
  width: 100%;
  overflow-x: auto; /* 允许内容水平滚动 */
  -webkit-overflow-scrolling: touch; /* 优化移动端滚动性能 */
}

:deep(.el-tabs__header)
{
  margin: 0 0 0 0;
}

:deep(.el-tabs__item) {
  color: hotpink;
  opacity: 0.8;
}

/**选中 */
:deep(.el-tabs__item.is-active) {
  color: #4ad32a;
  opacity: 1;
}

/**悬浮 */
:deep(.el-tabs__item:hover) {
  color: cornflowerblue;
  cursor: pointer;
  opacity: 1;
}
:deep(.el-tabs__item.is-top:last-child) {
  float: right;
}

</style>
